<template>
  <div class="question-container">
    <div class="question-container-form">
      <Form
        ref="ax-form"
        :form-node="formNode"
        :form-model="formModel"
        :form-inline="true"
      />
    </div>
    <div class="question-container-table">
      <Table
        :table-data="tableData"
        :columns="columns"
        :turn-page="tableTurnPage"
        :handle-size-change="handleSizeChange"
        :height="740"
      />
    </div>
  </div>
</template>
<script>
import Form from '@/components/Form/Form'
import Table from '@/components/Table/Table'
export default {
  components: {
    Form,
    Table
  },
  props: [],
  data() {
    return {
      tableData: {
        loading: false,
        data: [
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          }
        ],
        pages: '',
        currentPage: 1,
        size: 10,
        layout: 'prev, pager, next, jumper, sizes, total',
        border: true,
        total: 0
      },
      columns: [
        {
          label: '序号',
          type: 'index',
          align: 'center',
          width: '60px'
        },
        {
          dataName: 'hazardName',
          label: '题目',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '面试时间',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '解答',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '难度',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '标签',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '展现量',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '遇到',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '收藏',
          align: 'left',
          width: ''
        },
        {
          dataName: 'hazardName',
          label: '操作',
          align: 'left',
          width: '330px',
          formatter: (row, cell, cellValue) => {}
        }
      ],
      // form
      formNode: [
        {
          label: '关键字：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Select',
              componentName: 'DefaultSelect',
              modelName: 'questionNameList',
              placeholder: '请选择关键字',
              clearable: true,
              isOpenMultiple: true, // 多选开关
              options: [
                { optionsId: '0', optionsName: '简单' },
                { optionsId: '1', optionsName: '适中' },
                { optionsId: '2', optionsName: '困难' },
                { optionsId: '3', optionsName: '地狱' }
              ]
            }
          ]
        },
        {
          label: '公司名称：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              componentName: 'el-input',
              modelName: 'deptName',
              placeholder: '请输入公司/部门名称',
              clearable: true
            }
          ]
        },
        {
          label: '面试时间：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              typeModel: 'datetime',
              componentName: 'el-date-picker',
              modelName: 'interviewTime',
              placeholder: '请选择时间',
              clearable: true,
              pickerOptions: {
                disabledDate(time) {
                  // 时间方法
                }
              }
            }
          ]
        },
        {
          label: '面试难度：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Select',
              componentName: 'DefaultSelect',
              modelName: 'questionLevel',
              placeholder: '请选择问题难度',
              clearable: true,
              options: [
                { optionsId: '0', optionsName: '简单' },
                { optionsId: '1', optionsName: '适中' },
                { optionsId: '2', optionsName: '困难' },
                { optionsId: '3', optionsName: '地狱' }
              ]
            }
          ]
        },
        {
          label: '问题标签：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              componentName: 'el-input',
              modelName: 'questionTags',
              placeholder: '请输问题标签',
              clearable: true
            }
          ]
        },
        {
          label: ' ',
          width: '110px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '90px',
              text: '重置',
              type: 'Public',
              typeModel: '',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.reset()
              }
            }
          ]
        },
        {
          label: ' ',
          width: '110px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '90px',
              text: '查询',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.search()
              }
            }
          ]
        },
        {
          label: ' ',
          width: '110px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '90px',
              text: '查询',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.search()
              }
            }
          ]
        },
        {
          label: ' ',
          width: '140px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '120px',
              text: '下载模板',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.downloadTemplate()
              }
            }
          ]
        },
        {
          label: ' ',
          width: '110px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '90px',
              text: '导入',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.importFile()
              }
            }
          ]
        },
        {
          label: ' ',
          width: '110px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '90px',
              text: '导出',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.exportFile()
              }
            }
          ]
        }
      ],
      // form对应的v-model/value
      formModel: {
        questionNameList: [], // 关键字
        deptName: '', // 公司名称
        interviewTime: '', // 面试时间
        questionLevel: '', // 问题难度
        questionTags: '' // 问题标签
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 重置
    reset() {},
    // 查询
    search() {},
    // 下载模板
    downloadTemplate() {},
    // 导入
    importFile() {},
    // 导出
    exportFile() {},
    // 获取数据
    getData() {},
    // 翻页
    tableTurnPage() {},
    // 分页
    handleSizeChange() {}
  }
}
</script>
<style lang="scss">
@import "../../styles/style.scss";
</style>
